<template>
    <div class="box_cont topic_cont flex_column_between" ref="boxfull">
        <audio :src="voiceUrl" controls ref="audio" class="po" @ended="playEnd" style="display:none;"></audio>
        <audio src="@/assets/audio/success.mp3" controls ref="audioGreen" class="po" style="display:none;"></audio>
        <audio src="@/assets/audio/pity.mp3" controls ref="audioRed" class="po" style="display:none;"></audio>
        <div class="w-full cut_tit flex_center_between">
            <img class="back_img cur" @click="backFn" src="@/assets/img/back.png" />
            <h5>剪纸盒  {{ titleMap }}</h5>
            <div></div>
        </div>
        <!-- 课程结束倒计时 -->
        <learnTime :timeStr="timeStr" @detection="detection" v-if="learnType == 1"></learnTime>
        <div class="work_cont">
            <div class="item flex_center_between transition" :class="{active: activedIndex == index,bm0:wordsList.length==(index+1)}" v-for="(item, index) in wordsList" :key="index" @click.prevent="playAudio(index, item)"> 
                <span class="label">{{ translationShow[item.id] == 1 ? item.translation : item.word}}</span> 
                <template v-if="stepWord == 1">
                    <div class="img_cont flex_c_c" @click.stop="firstBoxFun(index, item)">
                        <cut-right class="icon" />
                    </div>
                </template> 
                <template v-else>
                    <div class="img_cont flex_c_c">
                        <span  @click.stop="goGreenBox(index, item)"><cut-right class="icon" /></span>
                        <span @click.stop="goRedBox(index, item)"><cut-right class="cut-right-red icon" /></span>
                    </div>
                </template>
            </div>
            <!-- <tip-pop /> -->

            <!-- 剪纸盒结果 -->
            <div class="flex_center_between h_full w_full" style="flex: 1;">
                <div class="item1 next_box cur" v-if="showAnew" @click="anewFn">
                    <img src="@/assets/img/anew.png" class="result-icon" />
                    <p class="flex_c_c cur">
                        <img src="@/assets/img/share.png" class="result-icon_tip" /> 
                        <span class="text">重新检查</span>
                    </p>
                </div>

                <div class="item1 start_box cur" v-if="showNext == 1" @click="nextGroup">
                    <img src="@/assets/img/cut-next.png" class="result-icon" >
                    <p class="flex_c_c cur">
                        <img src="@/assets/img/cut-next_tip.png" class="result-icon_tip" />
                        <span class="text">下一组</span>
                    </p>
                </div>

                <div class="item1 start_box cur" v-if="showNext == 2" @click="mixGroupFn">
                    <img src="@/assets/img/cut_study.png" class="result-icon" />
                    <p class="flex_c_c cur">
                        <img src="@/assets/img/cut_study_tip.png" class="result-icon_tip" />
                        <span class="text">{{mixGroupTitle}}</span>
                    </p>
                </div>

                <div class="item1 start_box cur" v-if="showAnew || showNext" @click="learnFinish">
                    <img src="@/assets/img/cut_study.png" class="result-icon" />
                    <p class="flex_c_c cur">
                        <img src="@/assets/img/cut_study_tip.png" class="result-icon_tip" />
                        <span class="text">学后检测</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="cut_box flex_c_c" v-if="stepWord == 1">
            <div class="relative cur" @click="firstStepFun">
                <img class="cut_img" src="@/assets/img/cut_1.png"  srcset="">
                <div class="num_box">{{ firstBox.length }}</div>
            </div>
        </div>
        <div class="cut_box flex_c_c" v-if="stepWord == 2 && !showAnew && !showNext">
            <div class="cut_true cur" @click="greenBoxShow">
                <img class="cut_img" src="@/assets/img/cut_1.png"  srcset="">
                <div class="num_box">{{ greenBox.length }}</div>
            </div>
            <div class="cut_err cur" @click="redBoxShow">
                <img class="cut_img" src="@/assets/img/cut_2.png"  srcset=""> 
                <div class="num_box">{{ redBox.length }}</div>
            </div>
        </div>

    </div>
</template>

<script>

import { in_array } from '@/utils/index.js'
import cutRight from './icon/right-color.vue'
import tipPop from './components/tipPop.vue'
import learnTime from './components/learntime.vue'

export default {
    components: { cutRight, tipPop ,learnTime },
    props: {
        words: {type: Array, default: []},
        group: {type: Number, default: 0},
        totalGroup: {type: Number, default: 0},
        titleMap: {type: String, default: ''},
        mixGroup: {type: Number, default: 0},
        timeStr: {type: String, default: ''},
        learnType: {type: Number, default: 0},
    },
    data() {
        return {
            in_array,
            showAnew: false, //重新检查
            showNext: 0, //1：下一组  2：混组检查  3：学后检测
            stepWord: 1,
            wordsList: [],
            totalWords: 0,
            wordPlayStatus: [],
            translationShow: [],
            voiceUrl: '',
            currentPlayIndex: 0,
            firstIndex: 0,
            firstBox: [],
            redBox: [],
            greenBox: [],
            activedIndex: null,
            mixTotalGroup: 0,
            mixGroupTitle: '混组检测'
        }
    },
    mounted(){
        this.initData()
        this.getMixTotalGroup()
    },
    methods:{
        initData(words) {
            this.wordsList = words ? words : this.words
            if (this.wordsList.length > 1) {
                this.shuffleArray(this.wordsList)
            }
            this.totalWords = this.wordsList.length
            this.firstIndex = 0
            this.firstBox = []
            this.greenBox = []
            this.redBox = []
            this.activedIndex = null
        },
        //单词随机
        shuffleArray() {
            let newWords = this.wordsList.slice(0);
            for(let i = newWords.length - 1; i > 0; i--){
                const j = Math.floor(Math.random() * (i + 1));
                [newWords[i], newWords[j]] = [newWords[j], newWords[i]];
            }
            if (this.wordsList.length !== 0 && this.arraysEqual(newWords, this.wordsList)) {
                return this.shuffleArray();
            }
            this.wordsList = newWords
        },
        arraysEqual(a, b) {
            return a.length === b.length && a.every((val, index) => val === b[index]);
        },
        getMixTotalGroup() {
            switch(this.totalGroup){
                case 1:
                this.mixTotalGroup = 1;
                    break; 
                case 2:
                    this.mixTotalGroup = 2;
                    break; 
                case 3:
                case 4:    
                    this.mixTotalGroup = 3;
                    break;
                case 5:
                    this.mixTotalGroup = 4;
                    break;
                case 6:
                    this.mixTotalGroup = 5;
                    break; 
                case 7:
                    this.mixTotalGroup = 6;
                    break;     
                case 8:
                    this.mixTotalGroup = 7;
                    break; 
                case 9:
                    this.mixTotalGroup = 8;
                    break;           
            }
        },
        playAudio(index, word) {
            this.activedIndex = index
            this.wordPlayStatus = []
            this.currentPlayIndex = index
            this.resetTranslationShow(word)
            this.translationShow[word.id] = !this.translationShow[word.id] || this.translationShow[word.id] == 2 ? 1 : this.translationShow[word.id] + 1 
            if (word.voiceFile) {
                this.voiceUrl = word.voiceFile.url
                this.$nextTick(() => {
                    this.$refs.audio.load()
                    this.$refs.audio.play()
                    this.wordPlayStatus[index] = true
                })
                if (this.translationShow[word.id] == 2) {
                    this.translationShow[word.id] = 0
                } 
                this.$forceUpdate()
            } 
        },
        playEnd() {
            this.wordPlayStatus = []
        },
        firstBoxFun(index, word) {
            this.activedIndex = index
            this.resetTranslationShow(word)
            if (this.firstIndex != word.id) {
                this.translationShow = []
            }
            this.firstIndex = word.id
            if (this.translationShow[word.id] == 1) {
                let newWords = this.wordsList.slice(0);
                if (!this.firstBox.length || this.firstBox.indexOf(word.id) == -1) {
                    this.firstBox.push(word.id)
                    newWords.splice(index, 1)
                }
                this.wordsList = newWords
                if (word.voiceFile) {
                    this.voiceUrl = word.voiceFile.url
                    this.$nextTick(() => {
                        this.$refs.audio.load()
                        this.$refs.audio.play()
                    })
                }
                return false
            }
            this.translationShow[word.id] = !this.translationShow[word.id] || this.translationShow[word.id] == 2 ? 1 : this.translationShow[word.id] + 1 
            if (word.voiceFile) {
                this.voiceUrl = word.voiceFile.url
                this.$nextTick(() => {
                    this.$refs.audio.load()
                    this.$refs.audio.play()
                    this.wordPlayStatus[index] = true
                })
                if (this.translationShow[word.id] == 2) {
                    this.translationShow[word.id] = 0
                } 
                this.$forceUpdate()
            } 
        },
        firstStepFun() {
            if (!this.firstBox.length || this.firstBox.length != this.words.length) {
                return 
            }
            this.stepWord = 2
            this.wordsList = this.words
            this.activedIndex = null
            this.translationShow = []
        },
        //放入绿色盒子
        goGreenBox(index, word) {
            this.activedIndex = null
            this.resetTranslationShow(word)
            // 播放音效
            this.$nextTick(() => {
                this.$refs.audioGreen.load()
                this.$refs.audioGreen.play()
            })
            let newWords = this.wordsList.slice(0);
            if (!this.greenBox.length || this.greenBox.indexOf(word.id) == -1) {
                this.greenBox.push(word)
                newWords.splice(index, 1)
            }
            this.wordsList = newWords
            if (this.greenBox.length == this.totalWords) {
                this.showAnew = true
                if (this.totalGroup == 1) {
                    if (this.mixGroup == 0) {
                        this.showNext = 2
                        this.mixGroupTitle = '全部混组'
                    }else{
                        this.showNext = 3
                    }
                }else {
                    //1：下一组  2：混组检查  3：学后检测
                    if (this.group == this.totalGroup) {
                        if (this.mixGroup == 0 || this.mixGroup == 1 || (this.mixGroup == this.mixTotalGroup - 1)) {
                            this.showNext = 2
                        }else if (this.group == 5 && this.mixGroup == 2) {
                            this.showNext = 2
                        }else if (this.group == 6 && this.mixGroup == 3) {
                            this.showNext = 2
                        }else if (this.group == 7 && this.mixGroup == 4) {
                            this.showNext = 2
                        }else if (this.group == 8 && (this.mixGroup == 4 || this.mixGroup == 5)) {
                            this.showNext = 2
                        }else if (this.group == 9 && (this.mixGroup == 5 || this.mixGroup == 6)) {
                            this.showNext = 2
                        }else if (this.mixGroup == this.mixTotalGroup) {
                            this.showNext = 3
                        }
                        if (this.mixTotalGroup - 1 == this.mixGroup) {
                            this.mixGroupTitle = '全部混组'
                        }else{
                            this.mixGroupTitle = '混组检测'
                        }
                    }else if (this.group < this.totalGroup) {
                        if (this.in_array(this.group, [2, 3, 5, 6, 8])) {
                            if (this.group == 2 && this.mixGroup == 1) {
                                this.showNext = 1
                            }else if (this.group == 3 && this.mixGroup == 2) {
                                this.showNext = 1
                            }else if (this.group == 5 && this.mixGroup == 3) {
                                this.showNext = 1
                            }else if (this.group == 6 && this.mixGroup == 4) {
                                if (this.totalGroup >= 7) {
                                    this.showNext = 2
                                }else{
                                    this.showNext = 1
                                }
                            }else if (this.group == 6 && this.mixGroup == 5) {
                                this.showNext = 1
                            }else if (this.group == 8 && this.mixGroup == 4) {
                                this.showNext = 2
                            }else if (this.group == 8 && this.mixGroup == 5) {
                                this.showNext = 2
                            }else if (this.group == 8 && this.mixGroup == 6) {
                                this.showNext = 1
                            }else{
                                this.showNext = 2
                            }
                        }else{
                            this.showNext = 1
                        }
                    }else{
                        this.showNext = 1
                    }
                }
            }
        },
        //放入红色盒子
        goRedBox(index, word) {
            this.activedIndex = null
            this.resetTranslationShow(word)
            // 播放音效
            this.$nextTick(() => {
                this.$refs.audioRed.load()
                this.$refs.audioRed.play()
            })
            let newWords = this.wordsList.slice(0);
            if (!this.redBox.length || this.redBox.indexOf(word.id) == -1) {
                this.redBox.push(word)
                newWords.splice(index, 1)
            }
            this.wordsList = newWords
        },
        //显示绿色盒子
        greenBoxShow() {
            let newWords = this.wordsList.slice(0);
            this.greenBox.forEach((ele, index) => {
                newWords.push(ele)
                if (this.translationShow[ele.id]) {
                    this.translationShow[ele.id] = 0
                }
            })
            this.wordsList = newWords
            this.greenBox = []
        },
        //显示红色盒子
        redBoxShow() {
            let newWords = this.wordsList.slice(0);
            this.redBox.forEach((ele, index) => {
                newWords.push(ele)
                if (this.translationShow[ele.id]) {
                    this.translationShow[ele.id] = 0
                }
            })
            this.wordsList = newWords
            this.redBox = []
        },
        //重新检查
        anewFn() {
            let words = []
            this.greenBox.forEach((ele, index) => {
                words.push(ele)
            })
            this.wordsList = words
            this.greenBox = []
            this.redBox = []
            this.showAnew = false
            this.showNext = 0
            this.stepWord = 2
            this.activedIndex = null
            this.translationShow = []
        },
        resetTranslationShow(word) {
            // 将translationShow中非当前点击的单词的值进行重置
            if (this.translationShow.length) {
                for (let key in this.translationShow) {
                    if (key != word.id) {
                        this.translationShow[key] = 0
                    }
                }
            }
        },
        //切换下一组
        nextGroup() {
            this.showAnew = false
            this.showNext = 0
            this.stepWord = 1
            this.$emit('nextGroupFn')
        },
        //混组检查
        mixGroupFn() {
            this.showAnew = false
            this.showNext = 0
            this.stepWord = 1
            this.$emit('mixGroupFn')
        },
        //学后检测
        learnFinish() {
            this.$emit('learnFinishFn')
        },
        detection(){
            this.$emit('detection')
        },
        backFn(){
            this.$emit('backFn')
        }
    }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";
.icon{color: #40D463;width: 4rem;height: 4rem}
.box_cont{padding: 0 !important}
.relative{position: relative}
.mx-auto{margin-left: auto;margin-right: auto}
.cut_img{width: 9rem;height: 8.6rem}
.result-icon{width: 33.3rem;height: 24.6rem}
.result-icon_tip{width: 3.2rem;height: 3.2rem;margin-right: 1.2rem}
.text{font-size: 3.6rem}
.cut_tit{
    padding: 0 71.7rem 0 10rem;
}
.cut-right-red{
    color: #FF5252;
    transform: rotate(180deg);
    margin-left: 4rem;
}
.bm0{
    margin-bottom: 0px !important;
}
.active{
    background: #F69B2C !important;
    color: #fff !important;
}

.topic_cont{
    text-align: center;
    padding: 20px 0;
    h5{
        font-size: 3.2rem;
        font-weight: normal;
        margin-bottom: 1rem;
        color: #fff;
        // margin-right: 21.7rem;
    }
}
.work_cont{
    width: 100%;
    flex: 1;
    display: flex;
    justify-content: flex-start;
    // flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    // flex-direction: row;
    // overflow-y: scroll;
    overflow: auto;
    align-self:baseline;
    box-sizing: border-box;
    // margin-top: 20px;
    // padding: 2rem 20rem 0;
    padding: 4rem 71.7rem 0 10rem;

    //border-bottom: 1px solid #4762BB;
    position: relative;
    .item{
        width: 100%;
        text-align: center;
        // height: 90px;
        // line-height: 90px;
        padding: 2rem 3.2rem;
        background: #E8EBFF;
        border-radius: 10px;
        margin-bottom: 1.4rem;
        color: #27369C;
        cursor: pointer;
        .label{
            font-size: 5.4rem;
            font-weight: 600;
        }
        .img_cont{
            img{
                margin-left: 4rem;
            }
        }
        &:hover{
            background: #F69B2C;
            color: #fff;
            // .label{
                // font-size: 26px;
                // font-weight: normal;
            // }
            
        }
        &:last-child{
            margin-bottom: 0;
        }
    }
    .item1{
        p{
            margin-top: 3.2rem;
        }
    }
    .status{
        background: #F69B2C;
        color: #fff;
    }
    &::-webkit-scrollbar {
        width: 6px;
        height: 1px;
    }
    &::-webkit-scrollbar-thumb { 
        border-radius: 5px;
        background-color:$background-theme;
    }
    &::-webkit-scrollbar-track { 
        background: #fff;
        border-radius: 5px;
    }

    .next_box{
        padding: 5rem 3rem;
        color: #F69B2C;
        border-radius: 10px;
        transition: all .35s;
        border: 3px solid transparent;
        &:hover{
            border-color: #F69B2C;
            background: rgba(11, 154, 255, 0.05);
        }
    }

    .start_box{
        padding: 5rem 3rem;
        border-radius: 10px;
        border: 3px solid transparent;
        transition: all .35s;
        color: #019E69;
        &:hover{
            border-color: #019E69;
            background: rgba(11, 154, 255, 0.05);
        }
    }

}
.cut_box{
    width: 100%;
    padding: 2rem 71.7rem 2rem 10rem;
    .cut_true{
        margin-right: 12rem;
        position: relative;
            
        }
        .num_box{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 5.6rem;
            height: 5.6rem;
            line-height: 5.6rem;
            border-radius: 50%;
            background: #FFFFFF;
            color: #40D463;
            font-size: 3rem;
        }
    
    .cut_err{
        position: relative;
        .num_box{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 5.6rem;
            height: 5.6rem;
            line-height: 5.6rem;
            border-radius: 50%;
            background: #FFFFFF;
            color: #FF5252;
            font-size: 3rem;
        }
    }
    
}
.back_img{
    width: 4rem;
    height: 4rem;
    &:hover{
        content: url(@/assets/img/back_1.png);
    }
}
.w-full{
    width: 100%;
    padding: 1rem 71.7rem 0 10rem;
}
</style>
